<div class="edit">
    <form id="editForm" method="post">
        <div id="win">
        <table class="infobox" width="100%" border="0" cellspacing="5px"
               cellpadding="1px">
            <tr>
                <td width="15%"><label>商品名称：</label></td>
                <td width="35%"><input name="name" type="text" style="width:200px;" value="${(product.name)!''}"
                                       class="easyui-validatebox" autocomplete="off"/></td>
                <td width="15%"><label>详细说明：</label></td>
                <td width="35%"><input name="remark" type="text" style="width:200px;" value="${(product.remark)!''}"
                                       class="easyui-validatebox" autocomplete="off"/></td>
            </tr>
            <tr>
                <td width="15%"><label>分类：</label></td>
                <td width="35%">
                    <select id="categoryView" name="category" style="width:200px;"/>
                </td>
                <td width="15%"><label>品牌：</label></td>
                <td width="35%">
                    <input class="easyui-combobox" name="brand" id="brandView" style="width:200px"
                           panelHeight="300px" value="${(product.brand)!''}"
                           data-options="editable:false">
                </td>
            </tr>
        </table>
            <div id="toolbar">
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">新增属性</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">删除属性</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">保存属性</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">回退更改</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">获取更改</a>
            </div>
        </div>
        <table id="dg" class="easyui-datagrid" style="width:100%;height:auto"
               data-options="
				singleSelect: true,
				toolbar: '#win',
				url: '/newProduct/getAttribute?productId=${(product.id)!"-1"}',
				fitColumns:true,
				method: 'get',
				onClickRow: onClickRow
			">
            <thead>
            <tr>
                <th data-options="field:'attribute',width:100,align:'center',
						formatter:function(value,row){
							return row.name;
						},
						editor:{
						type:'combobox',
                        options:{
                            textField:'name',
                            valueField:'id',
                            method:'get',
                            editable:false,
                            url:'/common/getProductAttribute',
                            required:true
                          }
                       }">属性</th>
                <th data-options="field:'attributeValue',width:250,editor:'textbox',align:'center'">属性值</th>
            </tr>
            </thead>
        </table>
        <input hidden type="text" name="id" value="${(product.id)!''}">
    </form>
</div>
<script type="text/javascript">
    $(function () {
        $("#categoryView").combotree({
            url:'/allCategory/getAllData',
            editable:false,
            onLoadSuccess:function (node,data) {
                $("#categoryView").combotree('setValue','${(product.category)!''}')
            },
            loadFilter: function(rows){
                return convertTree(rows);
            }
        });

        $("#brandView").combobox({
            url: '/common/getBrand',
            valueField: 'id',
            textField: 'name'
        });
    });
    var editIndex = undefined;
    function endEditing(){
        if (editIndex == undefined){return true}
        if ($('#dg').datagrid('validateRow', editIndex)){
            var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'attribute'});
            var name = $(ed.target).combobox('getText');
            $('#dg').datagrid('getRows')[editIndex]['name'] = name;
            $('#dg').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
    function onClickRow(index){
        if (editIndex != index){
            if (endEditing()){
                $('#dg').datagrid('selectRow', index)
                        .datagrid('beginEdit', index);
                editIndex = index;
            } else {
                $('#dg').datagrid('selectRow', editIndex);
            }
        }
    }
    function append(){
        if (endEditing()){
            $('#dg').datagrid('appendRow',{});
            editIndex = $('#dg').datagrid('getRows').length-1;
            $('#dg').datagrid('selectRow', editIndex)
                    .datagrid('beginEdit', editIndex);
        }
    }
    function removeit(){
        if (editIndex == undefined){return}
        $('#dg').datagrid('cancelEdit', editIndex)
                .datagrid('deleteRow', editIndex);
        editIndex = undefined;
    }
    function accept(){
        if (endEditing()){
            $('#dg').datagrid('acceptChanges');
        }
    }
    function reject(){
        $('#dg').datagrid('rejectChanges');
        editIndex = undefined;
    }
    function getChanges(){
        var rows = $('#dg').datagrid('getChanges');
        alert(rows.length+' rows are changed!');
    }
</script>